<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="exChange">
    <table>
        <tbody>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>Jack</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>
    <script>
        //对象数组
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }, {
                name: 'Top1',
                age: 23,
                gender: '男'
            }
        ]
        
        // var arr  = [ "a","b","c"]
        function renderTable(arr){
            var tableStr = "<table><tbody>"+
                            "<tr>"+
                                "<th>姓名</th>"+
                                "<th>年龄</th>"+
                                "<th>性别</th>"+
                            "</tr>";
            for(var i=0;i<arr.length;i++){
                // console.log(arr[i]);
                // var obj = arr[i];
                tableStr+="<tr><td>"+arr[i].name+"</td><td>"+arr[i].age+"</td><td>"+arr[i].gender+"</td></tr>"
            }
            
            tableStr+= "</tbody></table>";
            // console.log(tableStr);
            var ele = document.getElementsByClassName("exChange")[0];
            ele.innerHTML = tableStr;
        }

        renderTable(arr);





    </script>
</body>

</html>